<!-- 班级信息 -->
<template>
  <!-- <dv-border-box-10 :color="['#50649a', '#50649b']"> -->
  <div class="k3">
    <!-- <div class="zong"> -->
    <!-- 班级信息 -->
    <div class="UDiv">
      <dv-border-box-10 :color="['#50649a', '#50649b']">
        <!-- <h3 class="oo">班级配置</h3>
        <hr /> -->
        <div class="L-lie">
          <i
            class="iconfont icon-analysis"
            style="font-size: 4rem; color: #8fe6f4"
          ></i>
          <h5 class="te">班级人数</h5>
          <h5><span>30</span>人</h5>
        </div>
        <div class="R-lie">
          <ul>
            <li>
              <h3>辅导员</h3>
              <h5><span>2</span>名</h5>
            </li>
            <li>
              <h3>班级委员</h3>
              <h5>
                <span>{{ banweiNumber }}</span
                >名
              </h5>
            </li>
            <li>
              <h3>部门干部</h3>
              <h5>
                <span>{{ leaderNumber }}</span
                >名
              </h5>
            </li>
            <li>
              <h3>社团指导教师</h3>
              <h5>
                <span>{{ teacherNumber }}</span
                >名
              </h5>
            </li>
          </ul>
        </div>
      </dv-border-box-10>
    </div>

    <!-- 作业完成度的无缝滚动 -->
    <div class="WDiv">
      <dv-border-box-10 :color="['#50649a', '#50649b']">
        <div class="feng">
          <table>
            <!-- 设置列宽 -->
            <colgroup>
              <col width="50%" />
              <col width="25%" />
              <col />
            </colgroup>
            <thead>
              <th>学号</th>
              <th>姓名</th>
              <th>进度</th>
            </thead>
          </table>

          <vue-seamless-scroll
            :data="stuInfo"
            :class-option="optionHover"
            class="seamless-warp"
            v-if="stuInfo[0]"
          >
            <ul>
              <li v-for="item in stuInfo" class="liStyle" :key="item.id">
                <span class="title1 text_align">{{ item.stuId }}</span>
                <span class="title2 text_align">{{ item.stuName }}</span>
                <span class="title2 text_align">
                  <el-progress
                    class="baifenbi"
                    :percentage="(item.rate * 100).toFixed(2)"
                  ></el-progress>
                </span>
              </li>
            </ul>
          </vue-seamless-scroll>
        </div>
      </dv-border-box-10>
    </div>
    <!-- </div> -->
  </div>
  <!-- </dv-border-box-10> -->
</template>

<script>
// import MyStudy from "@/components/MyStudy.vue";
import pubsub from "pubsub-js";
export default {
  // components: { MyStudy },
  data() {
    return {
      stuInfo: [
        //  {
        //     "id": 2761,
        //     "stuId": "2021105439054",
        //     "stuName": "吴依林",
        //     "rate": 0.78,
        //     "year": 2021,
        //     "college": "计算机与软件工程学院",
        //     "major": "计算机科学与技术",
        //     "className": "(3)班"
        // },
      ],
      classInfo: [], //订阅的消息
      banweiNumber: 0, // 班委
      leaderNumber: 0, // 部门干部
      teacherNumber: 0, // 指导老师
    };
  },
  computed: {
    //滚动表格的配置项
    optionHover() {
      return {
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        step: 0.3, // 数值越大速度滚动越快
        openWatch: true, // 开启数据实时监控刷新dom
        // limitMoveNum: 5, //开始滚动的数据量
        // singleHeight: 0, //单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        // singleWidth: 0, //单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        // waitTime: 1000 //单步运动停止的时间(默认值1000ms)
      };
    },
  },
  mounted() {
    this.pubId = pubsub.subscribe("selectClassInfo", (msgName, data) => {
      this.classInfo = data;
      // console.log("订阅消息", data);
      this.randomNumber();
      this.getInfo();
    });
    this.randomNumber();
  },
  methods: {
    getInfo() {
      this.$http({
        url: this.$http.adornUrl(
          `/chaoxing/homeworkhighfinishedrate/list/${this.classInfo.year}/${this.classInfo.college}/${this.classInfo.major}/${this.classInfo.className}`
        ),
        method: "get",
      }).then((response) => {
        if (response.data.code == 0) {
          this.stuInfo = response.data.data;
        } else {
          this.$message.success(response.msg);
        }
      });
    },
    randomNumber() {
      this.banweiNumber = Math.floor(Math.random() * (8 - 5 + 1)) + 5;
      this.leaderNumber = Math.floor(Math.random() * (15 - 10 + 1)) + 10;
      this.teacherNumber = Math.floor(Math.random() * (40 - 30 + 1)) + 30;
    },
  },
  beforeDestroy() {
    pubsub.unsubscribe(this.pubId);
  },
};
</script>

<style scoped>
.k3 {
  position: relative;

  width: 100%;
  height: 100%;
  /* background-color: #b9b8b8; */

  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* .zong {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 2%;
  width: 95%;
  margin: 0 auto;
  height: 95%;
  background-color: #fff;
} */
.oo {
  padding-left: 1rem;
  margin-top: 0.5rem;
  box-sizing: border-box;
}

.UDiv,
.WDiv {
  box-sizing: border-box;
  /* background-color: beige; */
  /* width: 100%;
  height: 50%; */
}
.UDiv {
  flex: 4;
  color: #fff;
  margin-bottom: 20px;
  backdrop-filter: blur(25px);
  /* background: rgba(255, 255, 255, 0.2); */
}
.WDiv {
  flex: 4.5;
  color: #fff;
  backdrop-filter: blur(25px);
}
.UDiv span {
  font-size: 30px;
  color: #8fe6f4;
  font-weight: bold;
  margin-left: 25px;
  box-sizing: border-box;
}
.L-lie {
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 40%;
  height: 100%;
  /* background-color: aquamarine; */
}
.L-lie i {
  padding-top: 1rem;
  padding-bottom: 0.7rem;
}
/*.L-lie h5 {
  text-align: center;
  font-weight: normal;
}
.te {
  margin-top: 0.5rem;
}
.L-lie h5 span {
  font-weight: 800;
  font-size: larger;
} */
.R-lie {
  float: right;
  width: 60%;
  height: 100%;
}
.R-lie ul {
  width: 100%;
  height: 95%;
  margin-top: 0.8rem;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-content: space-around;
}
.R-lie ul li {
  color: #fff;
  width: 50%;
  height: 50%;
}
.R-lie ul li h3 {
  text-align: left;
  /* font-weight: normal; */
}
/* .R-lie ul li span {
  font-weight: 800;
  font-size: large;
  color: #8FE6F4;
} */

/* 无缝滚动表 */
.feng {
  width: 100%;
  color: rgb(143, 230, 244);
  box-sizing: border-box;
  padding: 15px;
  /* background-color: azure; */
}
.feng ul {
  list-style: none;
}

.feng table {
  width: 100%;
  text-align: center;
}

.feng th {
  box-sizing: border-box;
  height: 2rem;
  line-height: 2rem;
  font-size: 0.8rem;
  /* background-color: #00ffff61; */

  border: 1px solid #00ffff;
}

.seamless-warp {
  height: 7.5rem;
  overflow: hidden;
  box-sizing: border-box;
  margin-top: 15px;
  /* background-color: #8ff4b6; */
}

.seamless-warp li {
  color: #fff;
  margin: 10px 0;
}
.feng .liStyle {
  color: #fff;
  height: 30px;
  line-height: 30px;
  width: 100%;
  display: flex;
}
.baifenbi {
  color: #fff;
}
.feng .title1 {
  width: 50%;
}

.feng .title2 {
  color: #fff;
  width: 25%;
}

.feng .text_align {
  text-align: center;
  color: #fff;
}
</style>
